<template>
  <div>
    <div class="appBox">
      <h2 class=" primary">分享列表</h2>
      <div class="tabaleBox">
        <el-table border
                  :data="state.tableData"
                  style="width: 100%"
                  :header-cell-style="{ color: '#000' }">

          <el-table-column prop="id"
                           label="发起分享位置"
                           show-overflow-tooltip
                           align="center"
                           width="180">
            <template #default="scope">
              <span v-if="scope.row.type == 0">直接转发小程序</span>
              <span v-if="scope.row.type == 1">转发岗位</span>
              <span v-if="scope.row.type == 2">转发简历</span>
              <span v-if="scope.row.type == 3">邀请好友页面转发</span>
              <span v-if="scope.row.type == 4">分享海报</span>
            </template>
          </el-table-column>
          <el-table-column prop="content"
                           label="文案"
                           show-overflow-tooltip
                           align="left">
          </el-table-column>
          <el-table-column prop="phone"
                           label="图片预览"
                           width="220"
                           align="center">
            <template #default="scope">
              <el-carousel :interval="2000"
                           v-if="scope.row.type == 4"
                           indicator-position="outside"
                           height="50px">
                <el-carousel-item v-for="(i,k) in scope.row?.pictureList "
                                  :key="k">
                  <el-image style="width: 90px; height: 30px;margin-top: 10px;"
                            :key="i"
                            :src="JSON.parse(i.url)[0].url"
                            :zoom-rate="1.2"
                            :max-scale="7"
                            :preview-teleported="true"
                            :min-scale="0.2"
                            :preview-src-list="scope.row.preImg"
                            :initial-index="k"
                            fit="cover" />
                </el-carousel-item>
              </el-carousel>
              <div v-else
                   height="50px">
                <div v-for="(i,k) in scope.row?.pictureList "
                     :key="k">
                  <el-image style="width: 90px; height: 30px;margin-top: 10px;"
                            :key="i"
                            :src="JSON.parse(i.url)[0].url"
                            :zoom-rate="1.2"
                            :max-scale="7"
                            :preview-teleported="true"
                            :min-scale="0.2"
                            :preview-src-list="[JSON.parse(i.url)[0].url]"
                            :initial-index="k"
                            fit="cover" />
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="createdAt"
                           label="修改时间"
                           width="180"
                           show-overflow-tooltip
                           align="center">

          </el-table-column>

          <el-table-column prop=""
                           label="操作"
                           align="center"
                           width="100">
            <template #default="scope">
              <!-- 其它操作 -->
              <div @click="methods.handleAction('adopt', scope.row)"
                   v-permission="1134"
                   class="primary cup">编辑</div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script setup>
import {
  ref,
  onMounted,
  reactive,
  toRefs,
  defineComponent,
  getCurrentInstance,
  nextTick,
} from "vue";
import Editor from '@/components/Editor.vue'
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
const router = useRouter();
const app = getCurrentInstance()?.proxy;
const initState = () => {
  return {
    totalSize: 0,
    tableData: [],
    params: {
      pageNum: 1,
      pageSize: 10,
      name: "",
      time: '',
    },
    totalInputColumns: [
      { key: "title", label: "文章标题", type: "input" },
      { key: "status", label: "状态", type: "select" },
      { key: "createdAt", label: "创建时间", type: "time" },
    ],
    valueInput: '',
    dialogData: '',
  };
};
const state = reactive(initState());
onMounted(() => {
  methods.getDataList();
});
const methods = {

  handleAction (type, data) {
    switch (type) {

      case "adopt": //
        if (data.type == 4) {
          router.push('/operate/shareSet/posterDispose?id=' + data.id)
        } else {
          router.push('/operate/shareSet/TextDispose?id=' + data.id)
        }
        break;
      case "subAdd": //保存
        methods.subData()
        break;
      case "delete": // 删除
        ElMessageBox.confirm("请确认是否删除该帮助文章?", "删除帮助文章", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            app.$get("/sysHelp/deleteById?id=" + data.id).then((res) => {
              methods.getDataList();
              ElMessage({
                type: "success",
                message: "已删除",
              });
            });
          })
        break;

      case "query": //查询
        methods.getDataList();
        break;
      case "reset": // 重置
        state.params = initState().params;
        break;
    }
  },



  getDataList () {
    app.$http
      .get("/sysShare/getList")
      .then((res) => {
        if (res.code == 200) {
          let preImg = []
          res.data[4].pictureList.forEach(a => {
            preImg.push(JSON.parse(a.url)[0].url)
          })
          res.data[4].preImg = preImg
          state.tableData = res.data;
        }
      });
  },
  //分页变化
  handleSizeChange () {
    state.params.pageNum = 1;
    methods.getDataList();
  },
  //表格翻页
  handleCurrentChange () {
    methods.getDataList();
  },
};
</script>

<style>
</style>